<script setup>
import { reactive, onMounted } from 'vue';
import { caeventv1stepApi as MainApi } from '@T2/service/api.ts';
import { downloadFiles } from '@T2/utils/utils.ts';

const { content } = defineProps({
  content: {
    type: Object,
    required: true,
  },
});
const emits = defineEmits(['showImages']);

const Resd = reactive({
  list: [],
});
onMounted(() => {
  GetMainTable();
})

const GetMainTable = () => {
  MainApi({
    method: 'get',
    params: {
      eventv1: content.id,
    }
  }).then(res => {
    Resd.list = res?.results || [];
  });
}
const showImages = (arrs) => {
  emits('showImages', arrs);
}
</script>

<template>
  <el-step v-for="item in Resd.list">
    <template #icon>
      <div class="step-icon"></div>
    </template>
    <template #title>
      <div class="title-line1 flex--center">
        <span class="title-name">{{ item.action }}</span>
        <el-icon color="#888888"><Clock /></el-icon>
        <span class="create-time">{{ item.create_time }}</span>
        <label class="create-user">{{ item.action.slice(2) }}人：<strong>{{ content.creater_name }}</strong></label>
      </div>
    </template>
    <template #description>
      <template v-if="item.action === '工单派单'">
        <div class="paidan-box flex flex-wrap">
          <div class="info-item">
            <label>处理人员：</label>
            <span>{{ item.spuser_name }}</span>
          </div>
          <div class="info-item">
            <label>是否外协：</label>
            <span>{{ item.wx ? '是' : '否' }}</span>
          </div>
          <div class="info-item">
            <label>材料申请：</label>
            <span>{{ item.clsq }}</span>
          </div>
          <div class="info-item" style="width: 100%;">
            <label>处理方案：</label>
            <span>{{ item.info }}</span>
          </div>
          <div class="info-item" style="width: 100%;" v-if="content.fj?.length">
            <label>相关附件：</label>
            <div class="flex-column">
              <div class="fj-item flex-sb-center" v-for="item in content.fj_json">
                <el-button type="primary" link @click="downloadFiles(item.name, item.file_url)">
                  <el-icon style="margin-right: 4px;"><Paperclip /></el-icon>{{ item.name }}
                </el-button>
              </div>
            </div>
          </div>
        </div>
      </template>
      
      <template v-if="item.action === '工单处理'">
        <div class="paidan-box flex flex-wrap">
          <div class="info-item">
            <label>参与人员：</label>
            <span>{{ item.cyusers }}</span>
          </div>
          <div class="info-item">
            <label>领料清单：</label>
            <span>{{ item.llqd }}</span>
          </div>
          <div class="info-item" style="width: 100%;">
            <label>处理说明：</label>
            <span>{{ item.info }}</span>
          </div>
          <div class="info-item" v-if="item.files.length">
            <label>图片信息：</label>
            <el-button type="primary" link @click="showImages(item?.files_json || [])">查看</el-button>
          </div>
          <div class="info-item" style="width: 100%;" v-if="item.fj?.length">
            <label>相关附件：</label>
            <div class="flex-column">
              <div class="fj-item flex-sb-center" v-for="item in item.fj_json">
                <el-button type="primary" link @click="downloadFiles(item.name, item.file_url)">
                  <el-icon style="margin-right: 4px;"><Paperclip /></el-icon>{{ item.name }}
                </el-button>
              </div>
            </div>
          </div>
        </div>
      </template>
      
      <template v-if="item.action === '工单验收'">
        <div class="paidan-box flex flex-wrap">
          <div class="info-item">
            <label>是否完成：</label>
            <span>{{ item.complete ? '是' : '否' }}</span>
          </div>
          <div class="info-item" style="width: 100%;">
            <label>验收内容：</label>
            <span>{{ item.info }}</span>
          </div>
          <div class="info-item" v-if="item.files.length">
            <label>图片信息：</label>
            <el-button type="primary" link @click="showImages(item?.files_json || [])">查看</el-button>
          </div>
        </div>
      </template>
    </template>
  </el-step>
</template>

<style lang="scss" scoped>
@use './style.scss';
.paidan-box {
  margin-top: 4px;
  padding: 12px 14px;
}
</style>